<template>
	<div class="member_edit">
		<el-form ref="formDataRef" :model="formData" label-width="120px" class="demo-form-inline">
			<el-form-item prop="registrationTime" label="绑定时间" style="width: 100%">
				<el-row>
					<el-col :span="18">
						<DatePicker v-model:start="formData.levelTimeStart" v-model:end="formData.levelTimeEnd" />
					</el-col>
				</el-row>
			</el-form-item>
			<el-form-item prop="member_level_id" label="推荐关系">
				<el-radio-group v-model="formData.isRecommind">
					<el-radio label="">全部</el-radio>
					<el-radio :label="1">直接关系</el-radio>
					<el-radio :label="2">间接关系</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item prop="keyWord" label="关键词">
						<el-input
							style="width: 100%"
							maxlength="200"
							@keyup.enter="onSearch"
							@blur="formData.keyWord = $utils.removeBilateralSpaces(formData.keyWord)"
							v-model="formData.keyWord"
							placeholder="名称、邮箱"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12" style="padding-left: 15px">
					<el-button type="primary" @click="onSearch">搜索</el-button>
					<el-button @click="resetForm">重置</el-button>
				</el-col>
			</el-row>
		</el-form>
		<div class="list-table">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column type="index" label="序号" width="60px"></el-table-column>
				<el-table-column width="250px" label="用户信息" show-overflow-tooltip>
					<template #default="scope">
						<p>用户姓名：{{ scope.row.name }}</p>
						<p>用户邮箱：{{ scope.row.email }}</p>
						<p>用户Id: {{ scope.row.id }}</p>
					</template>
				</el-table-column>
				<el-table-column prop="isVip" label="是否会员" show-overflow-tooltip>
					<template #default="scope">
						<p>{{ scope.row.isVip ? '是' : '否' }}</p>
					</template>
				</el-table-column>
				<el-table-column prop="recommindNum" label="推荐人数" show-overflow-tooltip></el-table-column>
				<el-table-column prop="totalOrderCount" label="订单数" show-overflow-tooltip></el-table-column>
				<el-table-column prop="levelTime" label="入会时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="pidTime" label="绑定时间" show-overflow-tooltip></el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script setup>
import DatePicker from '/@/components/common/datePicker/DatePicker.vue';
import { useMemberRecommendApi } from '/@/api/member';

const { getMemberRecommendLevelList } = useMemberRecommendApi();

const props = defineProps(['memberId']);
const formDataRef = ref();
const formData = ref({
	isRecommind: '',
	levelTimeStart: '',
	levelTimeEnd: '',
});

const tableData = ref([]);
const page = {
	current: 1,
	pageSize: 10,
	totle: 0,
};

const getlist = async () => {
	console.log(props.memberId);
	let res = await getMemberRecommendLevelList({ id: props.memberId, ...formData.value, ...page });
	console.log(res);
	if (res.code === 200) {
		tableData.value = res.data.data.map((item) => {
			return {
				...item,
				name: item.firstname + '' + item.lastname,
			};
		});
	}
};

const onSearch = () => {
	console.log(formData.value);
	getlist();
};
const resetForm = () => {
	formDataRef.value.resetFields();
};

onMounted(() => {
	getlist();
});
</script>
<style lang="scss">
.list-table {
	margin-top: 18px;
}
.el-form-item--default {
	.el-form-item__content {
		line-height: 25px;
	}
}
</style>
